<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<link rel="stylesheet" href="css/shouye.css">
</head>
<body>
	<div class="box">
		<p>走秀首页</p>
	</div>
	<div class="lunbo">
		<ul id="ul"> 
			<li><img src="img/tupian1.png"></li>
			<li><img src="img/tupian2.png"></li>
			<li><img src="img/tupian3.png"></li>
			<li><img src="img/tupian4.png"></li>
		</ul>
		<ol id="ol">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
	</div>
	<div class="biaoqian">
		<p>热门品牌</p>
	</div>
	<div class="banner">
		<ul>
			<li><img src="img/tupian2.png"></li>
			<li><p>芬迪</p><span>芬迪新品上线</span></li>
			<li><p>1.8折</p></li>
			<li><img src="img/tupian5.png"></li>
		</ul>
		<ul>
			<li><img src="img/tupian3.png"></li>
			<li><p>D2C</p><span>D2C新品上线</span></li>
			<li><p>1.8折</p></li>
			<li><img src="img/tupian5.png"></li>
		</ul>
		<ul class="a">
			<li><img src="img/tupian4.png"></li>
			<li><p>博柏利</p><span>博柏利新品上线</span></li>
			<li><p>1.8折</p></li>
			<li><img src="img/tupian5.png"></li>
		</ul>
         
	</div>
	<div class="pinpai">
		<button id="a">更多品牌>></button>
	</div>
      <div class="fenlei">
		  <p>热门分类</p>
	</div>
	<div class="center">
		<ul >
			<li><img src="img/tupian6.png"></li>
			<li><p>博柏利 包装</p><span>BURSERRY 博柏利新品上线</span></li>
			<li><img src="img/tupian5.png"></li>
		</ul>
		<ul >
			<li><img src="img/tupian7.png"></li>
			<li><p>博柏利 腕表</p><span>BURSERRY 博柏利新品上线</span></li>
			<li><img src="img/tupian5.png"></li>
		</ul>
		<ul class="a">
			<li><img src="img/tupian8.png"></li>
			<li><p>芬迪 FENDI男士羊毛衫</p><span>FENDI 芬迪新品上线</span></li>
			<li><img src="img/tupian5.png"></li>
		</ul>
	</div>
	<div class="dibu">
		<ul>
			<li><img src="img/dibu1.png"><p>首页</p></li>
			<li><img src="img/dibu2.png"><p>搜索</p></li>
			<li><img src="img/dibu3.png"><p>我的秀</p></li>
			<li><img src="img/dibu4.png"><p>购物车</p></li>
			<li><img src="img/dibu5.png"><p>更多</p></li>
		</ul>
	</div>
	<script src="flexible.debug.js"></script>
	<script src="flexible_css.debug.js"></script>
	
	<script type="text/javascript">
			var lunbo=document.getElementsByClassName('lunbo'),
      	     ul=document.getElementById('ul').getElementsByTagName('li'),
      	     ol=document.getElementById('ol').getElementsByTagName('li'),
      	     
      	     i=0,
      	     timer,
      	     index=0;
      	     function auto(){
                for(var j=0;j<ul.length;j++){
                	ul[j].style.display="none"
                	ol[j].style.background="red"
                }
                ul[i].style.display="block"
                ol[i].style.background="#ccc"
                i++;
                if(i>=ul.length){
                	i=0
                }
      	     }
      	    timer=setInterval(auto,1000)
      	    for(var z=0;z<ol.length;z++){
      	    	ol[z].index=z;
      	    	ol[z].onclick=function(){
      	    		for(var m=0;m<ol.length;m++){
                        ul[m].style.display="none"
                        ol[m].style.background="red"
      	    		}
      	    		ul[this.index].style.display="block"
      	    		ol[this.index].style.background="#ccc"
      	    	}
                  ol[z].onmouseenter=function(){
                  	clearInterval(timer)
                  }
                  ol[z].onmouseleave=function(){
                  	timer=setInterval(auto,1000)
                  	i=this.index
                  }
      	    }
      	    
      	    
		</script>
</body>
</html>